<template>
  <div class="scale-modifiy">
    <basic-container class="questionList">
      <div class="tools">
        <el-button type="primary" size="small" @click="handleAdd">
          添加题目
        </el-button>
        <el-button size="small" @click="handleClickRemove">
          删除最后一道题
        </el-button>
        <el-button size="small" @click="onLoad">刷新</el-button>

        <el-button size="small" @click="updateSubjectNo"
          >批量更新subjectNo</el-button
        >
        <el-button size="small" @click="exportTopic">导出题目</el-button>
      </div>

      <QuestionList
        editMode
        :questionList="questionList"
        @handleEdit="handleEdit"
      ></QuestionList>
    </basic-container>

    <AddQuestionDialog
      :visible.sync="addQuestionDialogVisible"
      :gaugeId="gaugeId"
      :question="question"
      :gaugeSubjectId="gaugeSubjectId"
      :questionList="questionList"
    ></AddQuestionDialog>
  </div>
</template>

<script>
import AddQuestionDialog from "./add-question-dialog.vue";
import { getTopicListByGaugetId, deleteTopic, updateTopic } from "@/api/scale";
import QuestionList from "./question-list.vue";
import { exportExcel } from "../config";

export default {
  name: "ScaleModifiy",
  components: { AddQuestionDialog, QuestionList },
  props: {
    gaugeId: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      addQuestionDialogVisible: false,
      gaugeSubjectId: "",
      question: null,
      questionList: [],
    };
  },
  watch: {
    gaugeId: {
      handler() {
        this.onLoad();
      },
      immediate: true,
    },
    addQuestionDialogVisible() {
      if (!this.addQuestionDialogVisible) {
        this.onLoad();
      }
    },
  },
  methods: {
    handleAdd() {
      this.gaugeSubjectId = "";
      this.question = null;
      this.addQuestionDialogVisible = true;
    },
    handleEdit(item) {
      this.gaugeSubjectId = item.gaugeSubjectId;
      this.question = item;
      this.addQuestionDialogVisible = true;
    },
    async onLoad() {
      const { gaugeId } = this;
      if (!gaugeId) {
        return;
      }
      const { data } = await getTopicListByGaugetId({ gaugeId: gaugeId });
      this.questionList = data.data;
      // console.log(data.data);
    },
    async handleClickRemove() {
      const { questionList } = this;
      const last = questionList[questionList.length - 1];

      if (!last) {
        return;
      }

      await deleteTopic({ ids: last.gaugeSubjectId });

      this.onLoad();
    },
    async updateSubjectNo() {
      const promiseList = this.questionList.map((item, index) => {
        item.subjectNo = index + 1;
        return updateTopic(item);
      });
      await Promise.all(promiseList);
    },
    async exportTopic() {
      let data = this.questionList;
      await exportExcel(data);
    },
  },
};
</script>

<style lang="scss" scoped>
.item {
  border-bottom: 1px solid #ccc;
  padding-bottom: 24px;
  .top {
    display: flex;
    justify-content: space-between;
  }
}

.buttons {
  position: fixed;
  bottom: 6px;
  right: 6px;
  left: 240px;
  text-align: right;
}

.container {
  margin-bottom: 80px;
}

.answer-list {
  list-style: none;
}
</style>
